
<?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<title>string concatenation perf : parameter variable</title> 
	
</head> 
<body> 
<h1>Concatenating a Parameter Variable</h1> 
<h2>+ VS. +=</h2> 
<h3>Concatenating a Parameter Variable with +=</h3> 
<p> 
	<a href="" onclick="showResult('result2', runPlusEqualsParam());return false;"
		>runPlusEqualsLocal()</a> : 
		&nbsp; <span id="result2"></span> 
</p> 
<br /> 
<h3>Concatenating a Parameter Variable with +</h3> 
<p> 
	<a href="" onclick="showResult('result1', runPlusParam());return false;"
		>runPlusLocal()</a> : 
		&nbsp; <span id="result1"></span> 
</p> 
<h3>Concatenating a Local Variable with +</h3> 
<p> 
	<a href="" onclick="showResult('result0', runPlusLocal());return false;"
		>runPlusLocal()</a> : 
		&nbsp; <span id="result0"></span> 
</p> 
<hr /> 
<p> 
	Tip: concatenate with + instead of +=
</p> 
<p> 
	Tip: If you're using a parameter variable, and you use +=, 
	don't reassign the parameter variable. This will allow the 
	browser to optimize your code for you. IE and Mozilla <strong>will</strong> do this.
</p> 
<script type="text/javascript"> 
// <![CDATA[
	function showResult(elId, value) {
		document.getElementById(elId).innerHTML = value;
	}
 
	var ITERATIONS = 1000;
 
	function runPlusEqualsParam(sParam) {
 
		var startTime = new Date().getTime();
		var elapsed = 0;
 
		var s;
		for(var i = 0; i < ITERATIONS; i++)
			s = plusEqualsParam();
		elapsed = new Date().getTime() - startTime;
		return "elapsed time: " + elapsed + "ms";
	}
	
	function runPlusParam(sParam) {
 
		var startTime = new Date().getTime();
		var elapsed = 0;
 
		var s;
		for(var i = 0; i < ITERATIONS; i++)
			s = plusParam();
		elapsed = new Date().getTime() - startTime;
		return "elapsed time: " + elapsed + "ms";
	}
 
	function runPlusLocal(sParam) {
 
		var startTime = new Date().getTime();
		var elapsed = 0;
 
		var s;
		for(var i = 0; i < ITERATIONS; i++)
			s = plusLocal();
		elapsed = new Date().getTime() - startTime;
		return "elapsed time: " + elapsed + "ms";
	}
 
	function plusEqualsParam(sParam) {
	
		var s = "";  
		
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 1
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 2
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 3
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 4
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 5
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 6
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 7
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 8
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 9
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 10
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 11
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 12
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 13
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 14
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 15
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 16
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 17
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 18
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 19
		s += sParam;s += sParam;s += sParam;s += sParam;s += sParam; // 20
		return s;
	}
	function plusParam(sParam) {
	
		var s = "" +   
		sParam + sParam + sParam + sParam + sParam // 1
		+ sParam + sParam + sParam + sParam + sParam // 2
		+ sParam + sParam + sParam + sParam + sParam // 3
		+ sParam + sParam + sParam + sParam + sParam // 4
		+ sParam + sParam + sParam + sParam + sParam // 5
		+ sParam + sParam + sParam + sParam + sParam // 6
		+ sParam + sParam + sParam + sParam + sParam // 7
		+ sParam + sParam + sParam + sParam + sParam // 8
		+ sParam + sParam + sParam + sParam + sParam // 9
		+ sParam + sParam + sParam + sParam + sParam // 10
		+ sParam + sParam + sParam + sParam + sParam // 11
		+ sParam + sParam + sParam + sParam + sParam // 12
		+ sParam + sParam + sParam + sParam + sParam // 13
		+ sParam + sParam + sParam + sParam + sParam // 14
		+ sParam + sParam + sParam + sParam + sParam // 15
		+ sParam + sParam + sParam + sParam + sParam // 16
		+ sParam + sParam + sParam + sParam + sParam // 17
		+ sParam + sParam + sParam + sParam + sParam // 18
		+ sParam + sParam + sParam + sParam + sParam // 19
		+ sParam + sParam + sParam + sParam + sParam; // 20
		return s;
	}
	function plusLocal(sParam) {
	
		var loc = sParam
		var s = "" +   
		loc + loc + loc + loc + loc // 1
		+ loc + loc + loc + loc + loc // 2
		+ loc + loc + loc + loc + loc // 3
		+ loc + loc + loc + loc + loc // 4
		+ loc + loc + loc + loc + loc // 5
		+ loc + loc + loc + loc + loc // 6
		+ loc + loc + loc + loc + loc // 7
		+ loc + loc + loc + loc + loc // 8
		+ loc + loc + loc + loc + loc // 9
		+ loc + loc + loc + loc + loc // 10
		+ loc + loc + loc + loc + loc // 11
		+ loc + loc + loc + loc + loc // 12
		+ loc + loc + loc + loc + loc // 13
		+ loc + loc + loc + loc + loc // 14
		+ loc + loc + loc + loc + loc // 15
		+ loc + loc + loc + loc + loc // 16
		+ loc + loc + loc + loc + loc // 17
		+ loc + loc + loc + loc + loc // 18
		+ loc + loc + loc + loc + loc // 19
		+ loc + loc + loc + loc + loc; // 20
		return s;
	}
	
// ]]>
</script> 
</body> 
</html> 